<template>
  <c-view>
    <template v-slot:header>
      <div class="title">
        {{ $route.meta.title }}
      </div>
    </template>
    <div class="main__box">
      <c-table
        ref="cTable"
        selection
        hasBorder
        :max-height="maxHeight"
        :size="size"
        :loading="isLoading"
        :table-header="tableHeader"
        :table-list="tableList"
        :table-inner-btns="tableInnerBtns"
        :page-info="pageInfo"
        @change-pagination="changePagination"
      >
        <template v-slot:header>
          <c-search :form-model="searchObj" :form-items="searchItems" @submit-form="searchSubmit" @reset-form="searchReset"></c-search>
        </template>
      </c-table>
    </div>
  </c-view>
</template>

<script>
import mixinTable from 'mixins/table'
// import dictObj from '@/store/dictData'
import utils from 'utils'

export default {
  name: 'memberList',
  mixins: [mixinTable],
  data(vm) {
    return {
      tableInnerBtns: [],
      // 表格内操作按钮
      tableHeader: [
        // {
        //   label: '所属城市',
        //   prop: 'cityName'
        // formatter(row) {
        //   return row && vm.setTableColumnLabel(row.cityCode, 'cityList')
        // },
        // search: {
        //   type: 'dict',
        //   optionsList: dictObj.cityList
        // }
        // },
        {
          label: '姓名',
          prop: 'name',
          fixed: true,
          width: 100,
          search: {
            type: 'input'
          }
        },
        {
          label: '头像',
          prop: 'portraitUrl',
          width: 100,
          isImage: true
        },
        {
          label: '性别',
          prop: 'sex',
          width: 100,
          formatter: row => row && vm.setTableColumnLabel(row.sex, 'genderSelect')
        },
        {
          label: '手机号码',
          prop: 'phone',
          width: 110,
          formatter: row => row && utils.hidePhoneNum(row.phone),
          isPopover: true,
          search: {
            type: 'input'
          }
        },
        {
          label: '驾驶证有效期',
          prop: 'driverNumberValidityTime',
          width: 120,
          formatter: row => (row && row.driverNumberValidityTime ? utils.fomartDate(row.driverNumberValidityTime, '{y}-{m}-{d}') : '')
        },
        {
          label: '驾驶证初次领证日期',
          prop: 'dateOfInitialLicensing',
          formatter: row => (row && row.dateOfInitialLicensing ? utils.fomartDate(row.dateOfInitialLicensing, '{y}-{m}-{d}') : '')
        },
        {
          label: '身份证号码',
          prop: 'idcard',
          width: 150,
          formatter: row => row && utils.hideIdNo(row.idcard)
        },
        {
          label: '驾驶证号码',
          prop: 'driverNumber',
          width: 150,
          formatter: row => row && utils.hideIdNo(row.driverNumber)
        },
        {
          label: '驾驶证照片',
          prop: 'driverNumber',
          width: 100,
          formatter: row => (row && row.driverNumber ? '已上传' : '未上传')
        },
        {
          label: '用车状态',
          prop: 'status',
          width: 100,
          formatter: row => row && vm.setTableColumnLabel(row.status, 'useCarStatus')
        },
        {
          label: '审核人',
          prop: 'examineUser',
          width: 100
        },
        // {
        //   label: '注册IP',
        //   prop: 'registerIp'
        // },
        {
          label: '资金状态',
          prop: 'moneyStatus',
          width: 100,
          formatter: row => row && vm.setTableColumnLabel(row.moneyStatus, 'moneyStatus')
        },
        {
          label: '注册时间',
          prop: 'createTime',
          search: {
            dateType: 'datetimerange',
            type: 'dateTime',
            prop: 'dateTime'
          },
          width: 160
        }
      ]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    /*
     * 查询表格列表数据
     */
    fetchData() {
      const { pageNo, pageSize } = this.pageInfo
      const { dateTime, ...other } = this.searchObj
      const searchDate = this.getSearchDate(dateTime, 'dateTime')
      this.isLoading = true
      this.$api.member
        .fetch('memberList', {
          ...searchDate,
          ...other,
          rows: pageNo,
          offset: pageSize
        })
        .then(res => {
          this.isLoading = false
          if (res && res.totalCount) {
            const { data, totalCount } = res
            this.pageInfo.totalNum = totalCount
            this.tableList = data || []
          } else {
            this.tableList = res || []
          }
        })
    },
    /**
     * 删除单条表格数据
     * @id {Number}
     */
    deleteHandle(params) {
      this.$api.member.deleteMember(params).then(() => {
        this.$msgTip('删除成功')
        this.delResetData()
      })
    }
  }
}
</script>
